.user-form {
  width: 400px;
  background-color: #fff;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 15px 10px;
  margin-right: 50px;

   h3{
    margin-bottom: 20px;
    text-align: center;
   }
  .user-form-item {
    margin-bottom: 28px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    color: var(--deep-gray);
    font-size: 14px;
    &-error{
      .value input{
        border: 1px solid rgb(239, 62, 27) !important;
        &:hover,&:focus{
          box-shadow: 0 0 3px rgb(239,62,27) !important;
        }
      }
    }
    .label {
      flex: 1;
      text-align: right;
      height: 32px;
      line-height: 32px;
      &::after{
        content: ":";
        margin: 0 8px 0 2px;
      }
    }
    .value {
      position: relative;
      flex: 6;
      input {
        height: 32px;
        width: 100%;
        padding: 4px 11px;
        box-sizing: border-box;
        border: 1px solid #cecece;
        border-radius: 6px;
        transition: all 0.3s ease-in-out;
        outline: none;
        &:hover,
        &:focus {
          border: 1px solid #1897ff;
        }
        &:focus {
          box-shadow: 0 0 3px #1897ff;
        }
        &::-webkit-input-placeholder{
            color: #cecece;
        }
      }
      span{
        color: red;
        position: absolute;
        left: 0;
        top: 34px;
      }
    }
  }
}
